<style>
  .alarm {
    padding: 0;
  }

  /* 筛选 */
  .filter-part {
    padding: 0 15px;
    padding-top: 11px;
    border-bottom: 1px solid #eee;
    background-color: #f7f8f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .date-range-part {
    margin-bottom: 12px;
  }

  /* 操作栏 按钮 */
  .del-btn {
    color: #ffffff;
    background-color: #4c6eef;
  }

  .del-btn:hover {
    color: #ffffff;
  }

  /* 三种类型按钮 start */
  #danger {
    color: #ff5454;
    border-color: #ff5454;
  }

  #danger:hover {
    box-shadow: 0 0 0 2px rgba(255, 84, 84, 0.3);
  }

  .actived#danger {
    color: #ffffff;
    background: #ff5454;
  }

  #warning {
    color: #fa8c16;
    border-color: #fa8c16;
  }

  #warning:hover {
    box-shadow: 0 0 0 2px rgba(250, 140, 22, 0.3);
  }

  .actived#warning {
    color: #ffffff;
    background: #fa8c16;
  }

  #resolved {
    color: #4b6eef;
    border-color: #4b6eef;
  }

  .actived#resolved {
    color: #ffffff;
    background: #4b6eef;
  }

  .alarm .layui-btn-container .layui-btn {
    margin-bottom: 12px;
  }
  /* 三种类型按钮 end */

  /* 日期选择器 start */
  #date-range .layui-input-inline {
    position: relative;
  }

  #date-range .layui-input-inline .icon {
    position: absolute;
    right: 20px;
    top: 8px;
    width: 16px;
    height: 16px;
  }

  #date-range .layui-input-inline .layui-input {
    width: 206px;
    height: 32px;
    line-height: 32px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    font-size: 14px;
    letter-spacing: 0;
  }

  #date-range-input {
    margin-right: 10px;
  }

  #date-range-input::-webkit-input-placeholder {
    text-indent: 0.2em;
    font-size: 14px;
    color: #bfbfbf;
  }

  #layui-laydate1 .laydate-main-list-0 .layui-laydate-header {
    border-radius: 4px 0 0 0;
  }

  #layui-laydate1 .laydate-main-list-1 .layui-laydate-header {
    border-radius: 0 4px 0 0;
  }

  .layui-laydate-header i {
    color: rgba(0, 0, 0, 0.65) !important;
  }

  .layui-laydate-header span {
    color: #2f343e !important;
  }

  .layui-laydate-header i:hover {
    color: #2f343e !important;
  }

  .layui-laydate-header span:hover {
    color: #4b6eef !important;
  }

  .layui-laydate .layui-this {
    background-color: #4b6eef !important;
    border-radius: 4px;
  }

  .layui-laydate-footer {
    border-radius: 0 0 4px 4px;
  }

  .layui-laydate-content td:hover {
    color: #4b6eef;
  }

  .layui-laydate-content td:hover::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border: 1px solid rgba(75, 110, 239, 1);
    border-radius: 4px;
    box-sizing: border-box;
  }

  .layui-laydate table {
    border-collapse: separate;
    border-spacing: 0 6px;
  }

  .layui-laydate-content td.laydate-selected {
    background-color: #f3f5fc !important;
  }

  .laydate-selected:hover {
    border-radius: 4px;
    background-color: #4b6eef !important;
  }

  #layui-laydate1 .layui-this {
    border-radius: 4px;
  }

  .layui-laydate-footer span:hover {
    color: #4c6eef;
  }

  .laydate-footer-btns {
    border-radius: 4px;
  }
  /* 日期选择器 end */

  /* 表格部分 */

  .alarm.layui-table-box {
    border-top: 1px solid #eee;
  }

  .layui-table-box {
    height: 100%;
  }

  .alarm .layui-table-body {
    overflow-x: hidden;
    height: 100% !important;
  }

  .alarm .layui-table tbody tr:hover {
    background: #f7f8f9;
  }

  .alarm .layui-table-cell {
    height: auto;
  }

  .alarm .layui-table-view {
    border: none;
    margin: 0 14px;
    margin-bottom: 16px;
  }

  .alarm .table-cell {
    font-size: 14px;
    color: #111111;
    font-weight: 400;
    font-family: SourceHanSansCN-Normal;
    line-height: 1;
  }

  .alarm .table-cell .cell-top {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .alarm .layui-form-checked[lay-skin="primary"] i {
    border-color: #4c6eef !important;
    background-color: #4c6eef;
    font-weight: bold;
  }

  .alarm .layui-form-checkbox[lay-skin="primary"]:hover i {
    border-color: #4c6eef !important;
  }

  /* 表格 单元格 start */
  .img-text-cell {
    font-family: SourceHanSansCN-Regular;
    display: flex;
    align-items: center;
    padding-top: 12px;
    line-height: 1;
  }

  .img-text-cell .file-name {
    font-family: SourceHanSansCN-Medium;
    font-size: 16px;
    letter-spacing: 0;
    font-weight: 500;
    margin-right: 16px;
  }

  .img-text-cell .file-name.danger {
    color: #ff3535;
  }

  .img-text-cell .file-name.warning {
    color: #fa8c16;
  }

  .img-text-cell .file-path {
    vertical-align: bottom;
    display: inline-block;
    width: auto;
    max-width: 340px;
    margin-right: 10px;
    font-size: 14px;
    color: #4b6eef;
  }

  .img-text-cell .icon {
    padding: 2px;
    width: 22px;
    cursor: default;
    margin-right: 12px;
  }

  .img-text-cell .icon:hover {
    background: #efefef;
    border-radius: 2px;
  }

  .open-file {
    margin-left: 11px;
  }

  .warning-tab {
    display: flex;
    align-items: center;
  }

  .warning-tab .icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    text-align: center;
    align-items: center;
    justify-content: center;
    line-height: 12px;
    margin-right: 4px;
  }

  .warning-tab .icon.type {
    display: none;
  }

  .warning-tab .icon img {
    width: 16px;
    height: 16px;
  }

  .other-info {
    padding-top: 12px;
    margin-right: 14px;
  }

  .time-part {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 14px;
  }

  .empty {
    padding-top: 180px;
    font-family: SourceHanSansCN-Regular;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    font-weight: 400;
    text-align: center;
  }

  .empty-img {
    width: 232px;
    margin-bottom: 22px;
  }
  /* 表格 单元格 end */
  
  /* 弹框 */
  .change-file-dialog .layui-layer-title {
    height: 40px;
    line-height: 40px;
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    color: #FFFFFF;
    font-weight: 400;
    background: #4B6EEF;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  }

  .layui-layer-setwin {
    top: 6px;
    right: 10px;
  }

  .layui-layer-setwin span {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    color: #FFFFFF;
  }

  .layui-layer-setwin span:hover {
    background: #718FFF;
    border-radius: 4px;
  }

  .change-file-dialog .layui-layer-btn0,
  .change-file-dialog .layui-layer-btn1 {
    border-radius: 4px;
    background: #FFFFFF;
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.15);
    margin-bottom: 10px;
  }

  .change-file-dialog .layui-layer-btn0 {
    background: #4B6EEF;
    border: 1px solid #4B6EEF;
    color: #FFFFFF;
  }

  .change-file-dialog .layui-layer-btn1:hover {
    color: #4B6EEF;
    border: 1px solid #4B6EEF;
    box-shadow: 0 0 0 2px rgba(75, 110, 239, 0.3);
  }

  .change-file-dialog .layui-layer-content {
    font-size: 16px;
    line-height: 40px;
    text-align: center;
  }

  .layui-layer-title {
    padding-left: 34px;
    position: relative;
  }

  .layui-layer-title::before {
    content: '';
    width: 18px;
    height: 18px;
    background: url(res/img/dialogIcon.png);
    background-size: cover;
    position: absolute;
    left: 10px;
    top: 10px;
  }
</style>
<script src="res/js/checkDate.js"></script>
<div class="alarm">
  <!-- 筛选部分 -->
  <div class="filter-part">
    <div>
      <div class="layui-btn-container" id="button-group">
        <button type="button" class="layui-btn btn tab-btn" id="danger">
          敏感文件(<span id="danger-num">0</span>)
        </button>
        <button type="button" class="layui-btn btn tab-btn" id="warning">
          疑似敏感文件(<span id="warning-num">0</span>)
        </button>
        <button type="button" class="layui-btn btn tab-btn" id="resolved">
          已整改(<span id="resolved-num">0</span>)
        </button>
      </div>
    </div>
    <div class="date-range-part">
      <div class="layui-inline" id="date-range">
        <div class="layui-input-inline">
          <input
            type="text"
            class="layui-input"
            id="date-range-input"
            autocomplete="off"
            placeholder="开始日期&nbsp;&nbsp;&nbsp;&nbsp;~&nbsp;&nbsp;&nbsp;&nbsp;结束日期"
          />
          <img class="icon" src="res/img/alarm/dateIcon.png" alt="" srcset="" />
        </div>
      </div>
      <span class="btns">
        <button
          type="button"
          class="layui-btn btn del-btn"
          id="change-type-btn"
        >
          判定为非敏感
        </button>
        <button type="button" class="layui-btn btn del-btn" id="delet-btn">
          批量清除文件
        </button>
      </span>
    </div>
  </div>
  <table class="layui-hide" id="file-table" lay-filter="table"></table>
  <div style="display: flex; align-items: center; justify-content: flex-end">
    <span class="count-part"> 共<span id="count">0</span>条 </span>
    <div id="pager">
      <span class="text">10条/页</span>
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </div>
    <div class="virtual-page" id="virtual-pagebar"></div>
  </div>
</div>
<script type="text/javascript">
  var tabIndex = "danger";
  // 判断客户端类型
  var clientType = "Online";

  layui.use(function () {
    let reqCmdName = "MainwtViolationReq";
    let $ = layui.$;
    let laytpl = layui.laytpl;
    let table = layui.table;
    let laydate = layui.laydate;
    var laypage = layui.laypage; // 自定义页脚
    let layer = layui.layer;

    clientType = sessionStorage.getItem("clientType") || "Online";

    // 表格
    let dataArr = null;
    let count = 0; // 数据总量
    let pageSize = 10;
    let pageNum = 1;
    let beginTime = ""; // 开始日期
    let endTime = ""; // 结束日期
    let uncheckTab = true; // 判断 敏感文件没有 切换到疑似敏感文件tab
    // 分页下拉
    var dropdown = layui.dropdown;
    dropdown.render({
      elem: "#pager", //可绑定在任意元素中，此处以上述按钮为例
      data: [
        {
          title: "10条/页",
          id: 10,
        },
        {
          title: "20条/页",
          id: 20,
        },
        {
          title: "30条/页",
          id: 30,
        },
        {
          title: "40条/页",
          id: 40,
        },
        {
          title: "50条/页",
          id: 50,
        },
      ],
      id: "pager",
      //菜单被点击的事件
      click: function (obj) {
        $("#pager .text").text(obj.id + "条/页");
        initPagination(obj.id);
        getIndexData(); // 初始化的页脚不请求，手动请求
      },
    });

    // 获取url传参
    function getUrlData() {
      if (window.location.hash.indexOf("?") < 0) {
        return;
      }
      let hash = window.location.hash;
      hash = hash.split("?")[1];
      params = hash.split("&");
      let paramObj = {};
      params.forEach((item) => {
        let key = item.split("=")[0];
        paramObj[key] = item.split("=")[1];
      });
      return paramObj;
    }
    // 告警跳转的页面
    function checkRedirect() {
      if (!getUrlData()) {
        return;
      }
      let redirectType = getUrlData().type || "MainwtViolationReq";
      $(".tab-btn.actived").removeClass("actived");
      switch (redirectType) {
        case "MainwtViolationReq": // 敏感文件
          tabIndex = "danger";
          break;
        case "MainwtSuspectReq": // 疑似敏感文件
          tabIndex = "warning";
          break;
        case "MainwtDeleteReq": // 已整改
          tabIndex = "resolved";
          break;
      }
      if (tabIndex) {
        // 手动确认跳转的tab
        uncheckTab = false;
      }
      $("#" + tabIndex).addClass("actived");
      changeTab(tabIndex);
    }
    checkRedirect(); // 告警跳转的页面

    initPagination(); // 初始化分页器
    table.render({
      elem: "#file-table",
      height: "full-160", // 计算表格高度
      skin: "line",
      id: "file-table",
      className: "table-part",
      data: dataArr,
      cols: [
        [
          { type: "checkbox", style: "top: -10px;z-index:100" },
          {
            field: "id",
            title: "ID",
            style: "height: 79px;margin-left: -20px",
            templet: "#table-Tpl",
          },
        ],
      ],
      done: function (res, curr, count) {
        // 去掉表格头部
        $(this.elem)
          .next()
          .find(".layui-table-header")
          .attr("class", "layui-hide layui-table-header");
        // 自定义空数据展示内容
        if (!count) {
          $("[lay-id=file-table] .layui-table-main").html(
            '<div class="empty"><img class="empty-img" src="res/img/tableEmpty.png" alt="" srcset=""><div>暂无记录</div></div>'
          );
        }
      },
    });
    // 判断渲染 获取当前页数据总量
    function compareStorage(cmdName, newValue, type) {
      var _this = sessionStorage.getItem(cmdName);
      // 当前页面 才渲染
      let res = newValue ? JSON.parse(newValue) : {};
      // 设置tab按钮上的 list数量

      let total = 0;
      if (type === "danger") {
        total = res.ViolationCount || 0;
      } else if (type === "warning") {
        total = res.SuspectCount || 0;
      } else if (type === "resolved") {
        total = res.DeleteCount || 0;
      }

      $("#danger-num").text(res.ViolationCount); // 敏感总数量
      $("#warning-num").text(res.SuspectCount); // 敏感总数量
      $("#resolved-num").text(res.DeleteCount); // 敏感总数量
      checkTabNum(res);
      // 当前tab页  区分变量
      if (tabIndex === type) {
        count = total;
        setPageData(newValue);
      }
    }

    // 判断tab切换
    function checkTabNum(res) {
      if (uncheckTab) {
        uncheckTab = false;
        let dangerNum = res.ViolationCount * 1; // 敏感文件
        let warningNum = res.SuspectCount * 1; // 疑似敏感文件
        let resolvedNum = res.DeleteCount * 1; // 已整改

        $(".tab-btn.actived").removeClass("actived"); // 移除之前按钮的选中状态
        if (!dangerNum && warningNum) {
          // 疑似敏感
          getIndexData("MainwtSuspectReq");
          tabIndex = "warning";
          reqCmdName = "MainwtSuspectReq";
          $("#warning").addClass("actived");
        } else if (!dangerNum && !warningNum && resolvedNum) {
          // 已整改
          getIndexData("MainwtDeleteReq");
          tabIndex = "resolved";
          reqCmdName = "MainwtDeleteReq";
          $("#resolved").addClass("actived");
        } else {
          // 敏感
          tabIndex = "danger";
          reqCmdName = "MainwtViolationReq";
          $("#danger").addClass("actived");
        }
        checkBtnShow();
      }
    }

    // 监听返回数据
    window.addEventListener("setItemEvent", function (e) {
      switch (e.key) {
        case "MainwtViolationRes": // 敏感文件
          compareStorage(e.key, e.newValue, "danger");
          break;
        case "MainwtSuspectRes": // 疑似敏感文件
          compareStorage(e.key, e.newValue, "warning");
          break;
        case "MainwtDeleteRes": // 已整改
          compareStorage(e.key, e.newValue, "resolved");
          break;
        case "res_delete_file": // 删除文件回复
          deleteRes(e.newValue);
          break;
        case "res_judge_file": // 判定为非敏感回复
          changeTypeRes(e.newValue);
          break;
        case "refresh": // 刷新
          getIndexData();
          break;
      }
      // 监听 告警弹框
      if (e.key === "MainwtDirectReq") {
        let type = JSON.parse(e.newValue).Direct;
        checkRedirect(); // 告警跳转的页面
      }
    });

    // 删除请求之后的回调
    function deleteRes(newValue) {
      let res = newValue ? JSON.parse(newValue).body : {};
      if (res.ret === "0") {
        layer.msg("已删除");
        getIndexData();
      }
    }
    // 判定为非敏感 请求之后的回调
    function changeTypeRes(newValue) {
      let res = newValue ? JSON.parse(newValue).body : {};
      if (res.ret === "0") {
        layer.msg("已更改");
        getIndexData();
      }
    }
    // 设置页面 渲染内容
    function setPageData(newValue) {
      let resData = newValue ? JSON.parse(newValue) : {};
      // 文件名最长展示13字
      let originArr = resData.FileList || [];
      originArr.forEach((item, index) => {
        let strLength = item.FileName.length || 0;
        if (strLength > 13) {
          item.FileNameTip = item.FileName;
          item.FileName =
            item.FileName.slice(0, 8) + "..." + item.FileName.slice(-4);
        }
        let pathLength = item.FilePath.length || 0;
        if (pathLength > 25) {
          item.FilePathTip = item.FilePath;
          item.FilePath =
            item.FilePath.slice(0, 15) + "..." + item.FilePath.slice(-8);
        }
      });
      dataArr = originArr;
      // 触发渲染
      tableReloadData();
      // 排除 分页组件触发的
      if (resData.PageNum === "1" && resData.OnePageCount === "10") {
        initPagination();
      }
    }

    // 请求数据
    function getIndexData(type) {
      let data = {
        cmd: reqCmdName,
        OnePageCount: pageSize + "",
        PageNum: pageNum + "",
        BeginTime: beginTime || "",
        EndTime: endTime || "",
      };
      if (type) {
        data = {
          cmd: type,
          OnePageCount: "10",
          PageNum: "1",
          BeginTime: "",
          EndTime: "",
        };
      }
      reqPageData(data);
    }
    getIndexData("MainwtViolationReq"); // 请求敏感文件

    // 判定为非敏感 按钮展示
    function checkBtnShow() {
      // 判定为非敏感
      if (clientType === "Offline" && tabIndex === "warning") {
        $("#change-type-btn").show();
      } else {
        $("#change-type-btn").hide();
      }
    }
    checkBtnShow();

    // tab切换
    function changeTab(type) {
      count = 0; // 数据总量
      pageSize = 10;
      pageNum = 1;
      $("#pager .text").text(pageSize + "条/页");

      tabIndex = type;
      switch (type) {
        case "danger":
          reqCmdName = "MainwtViolationReq";
          break;
        case "warning":
          reqCmdName = "MainwtSuspectReq";
          break;
        case "resolved":
          reqCmdName = "MainwtDeleteReq";
          break;
      }
      if (tabIndex === "resolved") {
        $("#delet-btn").hide();
      } else {
        $("#delet-btn").show();
      }
      checkBtnShow();
      clearDate();
      // 请求数据
      getIndexData();
    }
    // 按钮点击事件 切换tab
    $(".tab-btn").click(function () {
      $(".tab-btn.actived").removeClass("actived");
      $(this).addClass("actived");
      let type = $(this).attr("id");
      changeTab(type);
    });

    // 删除文件
    function deletFileList(fileIDList) {
      let data = {
        cmd: "req_delete_file",
        body: {
          list: fileIDList,
        },
      };
      reqPageData(data);
    }
    // 判定为非敏感
    function changeFileList(fileCodeList) {
      let data = {
        cmd: "req_judge_file",
        body: {
          list: fileCodeList,
        },
      };
      reqPageData(data);
    }

    // 打开文件
    function openFileReq(fileID) {
      let data = {
        cmd: "MainwtOpenPathReq",
        FileID: fileID,
      };
      reqPageData(data);
    }

    // 批量清除文件
    $("#delet-btn").click(function () {
      var checkStatus = table.checkStatus("file-table");
      let data = checkStatus.data || [];
      if (data.length) {
        let fileIDList = [];
        data.forEach((item) => {
          fileIDList.push(item.FileID);
        });
        layer.open({
          resize: false,
          move: false,
          title: '删除文件',
          area: ['400px', '185px'],
          btn: ['确定', '取消'],
          btnAlign: 'c',
          yes: function (index, layero) {
            deletFileList(fileIDList);
            layer.close(index);
            return true;
          },
          skin: 'change-file-dialog',
          content: '删除文件无法恢复，请确认需要删除么？'
        });
      } else {
        layer.msg("请选择要清除的选项");
      }
    });

    // 判定为非敏感
    $("#change-type-btn").click(function () {
      var checkStatus = table.checkStatus("file-table");
      let data = checkStatus.data || [];
      if (data.length) {
        let fileCodeList = [];
        data.forEach((item) => {
          fileCodeList.push(item.FileCode);
        });
        layer.open({
          resize: false,
          move: false,
          title: '判定为非敏感',
          area: ['400px', '185px'],
          btn: ['确定', '取消'],
          btnAlign: 'c',
          yes: function (index, layero) {
            changeFileList(fileCodeList);
            layer.closeAll()
          },
          skin: 'change-file-dialog',
          content: '判定为非敏感文件将无法恢复，请确认操作'
        });
      } else {
        layer.msg("请选择要操作的选项");
      }
    });

    function creatDateSelect() {
      //日期范围
      laydate.render({
        elem: "#date-range-input",
        range: "~",
        extrabtns: [
          {
            id: "lastday-7",
            text: "近7天",
            range: [
              new Date(new Date().setDate(new Date(getDate()).getDate() - 6)),
              new Date(new Date().setDate(new Date(getDate()).getDate())),
            ],
          },
          {
            id: "lastday-30",
            text: "近30天",
            range: [
              new Date(new Date().setDate(new Date(getDate()).getDate() - 29)),
              new Date(new Date().setDate(new Date(getDate()).getDate())),
            ],
          },
          {
            id: "lastday-60",
            text: "近60天",
            range: [
              new Date(new Date().setDate(new Date(getDate()).getDate() - 59)),
              new Date(new Date().setDate(new Date(getDate()).getDate())),
            ],
          },
        ],
        // 选择日期回调函数
        done: function (value, date, endDate) {
          let dateRange = value.split(" ~ ") || [];
          if (dateRange[0]) {
            beginTime = dateRange[0] + " 00:00";
            endTime = dateRange[1] + " 23:59";
          } else {
            beginTime = "";
            endTime = "";
          }
          getIndexData();
        },
      });
    }
    creatDateSelect();

    function clearDate() {
      beginTime = "";
      endTime = "";
      //删除原本的input元素，清除日期控件的缓存，再到DOM中插入日期控件并渲染
      $("#date-range-input").remove();
      //删除开始时间的input元素
      $(".layui-input-inline").append(
        '<input type="text" class="layui-input" id="date-range-input" autocomplete="off" placeholder="开始日期&nbsp;&nbsp;&nbsp;&nbsp;~&nbsp;&nbsp;&nbsp;&nbsp;结束日期">'
      );
      //再次渲染日期时间范围
      creatDateSelect();
    }

    // 监听表格 点击事件
    table.on("tool(table)", function (result) {
      let event = result.event;
      let row = result.data;
      if (event === "openFile") {
        // 打开文件
        openFileReq(row.FileID);
      }
      if (event === "delFile") {
        // 删除文件
        layer.open({
          resize: false,
          move: false,
          title: '删除文件',
          area: ['400px', '185px'],
          btn: ['确定', '取消'],
          btnAlign: 'c',
          yes: function (index, layero) {
            deletFileList([row.FileID]);
            layer.close(index);
            return true;
          },
          skin: 'change-file-dialog',
          content: '删除文件无法恢复，请确认需要删除么？'
        });
      }
    });

    // 获取新数据 表格重载
    function tableReloadData() {
      let cols = [
        [
          { type: "checkbox", style: "top: -10px;z-index:100" },
          {
            field: "id",
            title: "ID",
            style: "height: 79px;margin-left: -20px",
            templet: "#table-Tpl",
          },
        ],
      ];
      if (tabIndex === "resolved") {
        cols = [
          [
            {
              field: "id",
              title: "ID",
              style: "height: 79px;",
              templet: "#table-Tpl",
            },
          ],
        ];
      }
      table.reload("file-table", {
        limit: pageSize, // 不设置limit，默认永远为10
        data: dataArr,
        cols: cols,
      });
    }

    //执行一个laypage实例
    function initPagination(pageLimit) {
      $("#count").text(count);
      laypage.render({
        elem: "virtual-pagebar",
        prev: '<i class="layui-icon layui-icon-left"></i>',
        next: '<i class="layui-icon layui-icon-right"></i>',
        layout: ["prev", "page", "next", "skip"],
        theme: "#4c6eef",
        limit: pageLimit || 10,
        count: count, //数据总数，从服务端得到
        jump: function (obj, firstInit) {
          pageSize = obj.limit;
          pageNum = obj.curr;
          //首次不执行
          if (!firstInit) {
            // 获取新数据
            getIndexData();
          }
        },
      });
    }
  });
</script>
<!--表格模板 -->
<script id="table-Tpl" type="text/html">
  <div class="table-cell">
    <div class="cell-top">
      <div class="img-text-cell">
        <span class="file-name {{tabIndex}}" title="{{d.FileNameTip}}"
          >{{d.FileName}}</span
        >
        <span class="file-path" title="{{d.FilePathTip}}">{{d.FilePath}}</span>
        {{# if(tabIndex !== 'resolved'){ }}
        <img
          class="icon open-file"
          lay-event="openFile"
          src="res/img/alarm/fileIcon.png"
          title="打开目录"
        />
        <img
          class="icon del-file"
          lay-event="delFile"
          src="res/img/alarm/delIcon.png"
          title="删除文件"
        />
        {{# } }}
      </div>
      <div class="other-info">
        {{# if(tabIndex === 'danger' && clientType === 'Online'){ }}
        <div class="warning-tab">
          <span class="icon danger-icon">
            <img src="res/img/alarm/dangerType.png" alt="" srcset="" />
          </span>
          违规-绝密
        </div>
        {{# } else if(tabIndex === 'warning') { }}
        <div class="warning-tab">
          {{# if(d.TargetType === '4'){ }}
          <span class="icon type{{d.TargetType}}">
            <img src="res/img/alarm/warningType1.png" alt="" srcset="" />
          </span>
          疑似标密 {{# } else {}}
          <span class="icon type{{d.TargetType}}">
            <img src="res/img/alarm/warningType2.png" alt="" srcset="" />
          </span>
          包含关键字 {{# } }}
        </div>
        {{# } else if(tabIndex === 'resolved') { }}
        <div class="resolved-tab">清除时间：{{d.DeleteTime}}</div>
        {{# } }}
      </div>
    </div>
    <div class="time-part">
      <div class="time-item">文件大小：{{d.FileSize}}</div>
      <div class="time-item">修改时间：{{d.ModifyTime}}</div>
      <div class="time-item">首次发现：{{d.FindTime}}</div>
      <div class="time-item">操作时间：{{d.LastTime}}</div>
    </div>
  </div>
</script>
